<template>
	<view class="p-12 text-white">
		<view class="bg-black-1 round-12 p-15 fs-15 flex flex-column gap-10">
			<view>
				<text>每邀请一位好友好友加入</text>
				<text v-if="WEBCONFIG?.give_point>0">，获得{{WEBCONFIG?.give_point}}点算力</text>
			</view>
			<text class="brown fs-14">1、好友开通店铺，您将自动赚取高额佣金；</text>
			<text class="brown fs-14">2、好友消费/看视频生成数字人视频，您将赚取佣金。</text>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="p-12 overflow-hidden" v-if="WEBCONFIG?.wx_ad_status.includes('wx_video_new') ">
			<ad :unit-id="WEBCONFIG?.wx_video_new" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

		<view class="mt-20 fw-600">好友消费奖励</view>

		<view class="flex flex-center mt-12">
			<view class="w-p-80">
				<uv-subsection :list="list" @change="subChange" :current="current" activeColor="#fff"
					inactiveColor="#C4C4C4" mode="button" bgColor="#1D2023" fontSize="16px"
					custom-style="border-radius: 60rpx;padding:4px;height:38px;"
					custom-item-style="border-radius: 60rpx;background:linear-gradient( 90deg, #5D33FE 0%, #0FDDF6 100%);"></uv-subsection>
			</view>
		</view>
		<view class="bg-black-1 round-8 py-12 mt-12 flex flex-x-space-around">
			<view class="flex flex-column flex-center gap-6 ">
				<text
					class="text-blue fs-20 fw-600">{{levelDetail.type==0?levelDetail.first_income + '元':levelDetail.first_income +'%'}}</text>
				<text class=" fs-14">获得佣金</text>
				<text class=" fs-12 text-grey">好友充值算力</text>
			</view>
		</view>

		<view class="bg-black-1 round-8 py-12 mt-12  ">
			<view class="text-center ">
				直推好友开通会员
				<text class="iconfont icon-xiangqing" @click="popup.open()"></text>
			</view>
			<view class="flex flex-x-space-around mt-16">
				<view class="flex flex-column flex-center gap-6 ">
					<text
						class="text-blue fs-20 fw-600">{{levelDetail.card_type==0?levelDetail.year_income_first + '元':levelDetail.year_income_first +'%'}}</text>
					<text class=" fs-14">获得佣金</text>
					<view class="fs-12 text-grey mt-4">
						推荐开通<text class="text-blue">年卡</text>
					</view>
				</view>
				<view class="flex flex-column flex-center gap-6 ">
					<text
						class="text-blue fs-20 fw-600">{{levelDetail.card_type==0?levelDetail.quarter_income_first + '元':levelDetail.quarter_income_first +'%'}}</text>
					<text class=" fs-14">获得佣金</text>
					<view class="fs-12 text-grey mt-4">
						推荐开通<text class="text-blue">季卡</text>
					</view>
				</view>
				<view class="flex flex-column flex-center gap-6 ">
					<text
						class="text-blue fs-20 fw-600">{{levelDetail.card_type==0?levelDetail.month_income_first + '元':levelDetail.month_income_first +'%'}}</text>
					<text class=" fs-14">获得佣金</text>
					<view class="fs-12 text-grey mt-4">
						推荐开通<text class="text-blue">月卡</text>
					</view>
				</view>
			</view>
		</view>

		<y-title class="mt-12">邀请好友攻略</y-title>
		<view class="round-12 mt-12 bg-black-1 py-15 px-20">
			<view class="text-center">邀请流程</view>
			<view class="flex flex-x-space-between fs-12 step-flow mt-12">
				<template v-for="(step, index) in steps" :key="index">
					<view class="flex flex-column flex-center gap-7">
						<view class="item w-40 h-40 round-circle flex flex-center">
							<image :src="step.image" class="w-26 h-26"></image>
						</view>
						<view class="flex flex-column text-center">
							<text>{{ step.title1 }}</text>
							<text>{{ step.title2 }}</text>
						</view>
					</view>
					<image v-if="index < steps.length - 1" src="/static/image/jt.png" class="arrow" />
				</template>
			</view>
		</view>

		<y-popup ref="popup" mode="center" round="12px">
			<view class="bg-white py-15 px-20 vw-85">
				<view class="text-black text-center pb-15 fs-17">间推收益</view>
				<view class="bg-grey-1 round-12 flex flex-x-space-around   text-333">
					<view class=" py-11 flex flex-column flex-center gap-2">
						<text
							class="fs-20 text-blue-2 fw-600">{{levelDetail.year_income_second}}{{levelDetail.card_type==0?'元':'%'}}</text>
						<text class="fs-14 ">获得佣金</text>
						<view class="flex fs-12 mt-6">
							<text class="text-999">间推</text>
							<text class="text-blue-2">年卡</text>
						</view>
					</view>
					<view class=" py-11 flex flex-column flex-center gap-2">
						<text
							class="fs-20 text-blue-2 fw-600">{{levelDetail.quarter_income_second}}{{levelDetail.card_type==0?'元':'%'}}</text>
						<text class="fs-14 text-333">获得佣金</text>
						<view class="flex fs-12 mt-6">
							<text class=" text-grey-1">间推</text>
							<text class="text-blue-2">季卡</text>
						</view>
					</view>
					<view class=" py-11 flex flex-column flex-center gap-2">
						<text
							class="fs-20 text-blue-2 fw-600">{{levelDetail.month_income_second}}{{levelDetail.card_type==0?'元':'%'}}</text>
						<text class="fs-14">获得佣金</text>
						<view class="flex fs-12 mt-6">
							<text class=" text-grey-1">间推</text>
							<text class="text-blue-2">月卡</text>
						</view>
					</view>
				</view>
				<view class="px-20 pt-10">
					<view class="gradient text-white text-center py-12 round-12 " @click="popup.close()">知道了</view>
				</view>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad } from '@dcloudio/uni-app'
	import { $http } from '@/utils';
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const current = ref(0)
	const list = ['年卡', '季卡', '月卡'];
	const levelList = ref([])
	const levelDetail = ref([])
	const popup = ref(null)
	const subChange = (e) => {
		current.value = e
		const targetLevelId = e == 0 ? 3 : e == 1 ? 2 : 1
		levelDetail.value = levelList.value.find(item => item.level_id === targetLevelId) || null
	}


	onLoad(() => {
		getList()
	})

	const getList = () => {
		$http.get('Level/getList').then(res => {
			levelList.value = res.data
			levelList.value.map(item => {
				if (item.level_id == 2) {
					levelDetail.value = item
				}
			})
		})
	}

	const steps = [
		{ image: '/static/image/fx.png', title1: '分享小程', title2: '序给好友' },
		{ image: '/static/image/zc.png', title1: '好友完成', title2: '账号注册' },
		{ image: '/static/image/yj.png', title1: '好友消费', title2: '你赚佣金' },
	];
</script>

<style>
	.item {
		background-color: rgba(13, 242, 131, 0.3);
	}

	.arrow {
		width: 42rpx;
		height: 14rpx;
		margin-top: 37rpx;
	}

	.brown {
		color: #FFB464;
	}
</style>